<!doctype html>
<html lang="en">
<head>
    <title>Grid - Column Resizing</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    <link href="../base-reset.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/Aristo/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css"/>
    <link href="../demos-single.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo-open.0.8.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.ui.wijgrid.css" rel="stylesheet" type="text/css" />

    <script src="../../external/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.glob.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>

    <script src="../../external/jquery.wijmo-open.0.8.2.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijgrid.js" type="text/javascript"></script>

    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#demo").wijgrid({
                scrollMode: "auto",
                allowColSizing: true
            });
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Column Resizing</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <table id="demo">
                <thead>
                    <tr>
                        <th>EmployeeID</th><th>LastName</th><th>FirstName</th><th>Title</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td><td>Davolio</td><td>Nancy</td><td>Sales Representative</td>
                    </tr>
                    <tr>
                        <td>2</td><td>Fuller</td><td>Andrew</td><td>Vice President</td>
                    </tr>
                    <tr>
                        <td>3</td><td>Leverling</td><td>Janet</td><td>Sales Representative</td>
                    </tr>
                    <tr>
                        <td>4</td><td>Peacock</td><td>Margaret</td><td>Sales Representative</td>
                    </tr>
                    <tr>
                        <td>5</td><td>Buchanan</td><td>Steven</td><td>Sales Manager</td>
                    </tr>
                    <tr>
                        <td>6</td><td>Suyama</td><td>Michael</td><td>Sales Representative</td>
                    </tr>
                    <tr>
                        <td>7</td><td>King</td><td>Robert</td><td>Sales Representative</td>
                    </tr>
                </tbody>
            </table>
            <!-- End demo markup -->
            <div class="demo-options">
            <!-- Begin options markup -->
                
            <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
                wijgrid allows columns resizing. Column width can be changed by dragging the right border of its title.</p>
          
       </div>
    </div>
</body>
</html>
